<template>
  <el-table
    border
    max-height="500"
    :data="value"
    class="text-center"
    :key="tableKey"
  >
    <el-table-column
      prop="code"
      v-if="isUpdate"
      label="包件编号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="包件名称">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'packageInfos.' + scope.$index + '.packageName'" :rules="[
          {required: true, message: '包件名称必须', trigger: 'blur'}
        ]">
          <el-input v-model="scope.row.packageName"
                    :disabled="isDisabled('packageName', scope.$index)"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      prop="productUnit"
      label="包件数">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'packageInfos.' + scope.$index + '.num'" :rules="[
          {required: true, message: '包件数量必须', trigger: 'change'},
          {validator: isInteger, message: '请输入整数', trigger: 'blur'}
        ]">
          <el-input v-model="scope.row.num" :min="1" :max="99999" label="描述文字"
                    :disabled="isDisabled('num', scope.$index)"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      prop="unit"
      label="单位">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'packageInfos.' + scope.$index + '.unit'" :rules="[
        ]">
          <el-select v-model="scope.row.unit" :disabled="isDisabled('unit', scope.$index)">
            <el-option v-for="item in unitArr" :key="item.value" :value="item.value" :label="item.text"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      prop="volume"
      label="单包件体积(m³)">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'packageInfos.' + scope.$index + '.volume'" :rules="[
          {validator: isFormatNumber, int: 9, message: '单包件体积必须是小数最大两位整数最大9位的小数', trigger: 'blur'},
        ]">
          <el-input v-model="scope.row.volume" :disabled="isDisabled('volume', scope.$index)"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      prop="weight"
      label="单包件重量(kg)">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'packageInfos.' + scope.$index + '.weight'" :rules="[
          {validator: isFormatNumber, int: 9, message: '单包件重量必须是小数最大两位整数最大9位的小数', trigger: 'blur'},
        ]">
          <el-input v-model="scope.row.weight" :disabled="isDisabled('weight', scope.$index)"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="200"
      fixed="right"
      v-if="!isUpdate"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
        <el-button
          v-if="(scope.$index + 1) == value.length"
          size="mini"
          type="primary"
          @click="pushItem">添加
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import {decimalNumFilter} from '@/filters'
import {alert, dotData} from '@/utils'
import Emitter from '@/utils/emitter.js'
import {getSubDictListOfParentCode, getPackageUnit} from '@/utils/selectOptions'
import {isFormatNumber, isInteger} from '@/utils/validate'

export default {
  name: 'orderPackageTable',
  mixins: [Emitter],
  filters: {
    decimalNumFilter
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    original: {
      type: Array,
      default() {
        return []
      }
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val, oldVal) {
      this.tableKey++
      this.$nextTick(_ => {
        this.initPackageArr()
        this.dispatch('ElFormItem', 'el.form.change', val)
      })
    }
  },
  data() {
    return {
      storageTypeArr: [],
      unitArr: [], // 单位
      tableKey: 1
    }
  },
  created() {
    // 存储类型
    getSubDictListOfParentCode('STORAGETYPE').then(arr => {
      this.storageTypeArr = arr
    })
    getPackageUnit().then(arr => {
      this.unitArr = arr
    })
    this.initPackageArr()
  },
  methods: {
    isFormatNumber,
    isInteger,
    // 删除
    handleDelete(index, row) {
      if (this.value.length <= 1) {
        alert('必须要有包件信息')
        return
      }
      this.value.splice(index, 1)
    },
    // 添加
    pushItem() {
      if (this.value.length >= 99) {
        alert('包件最多99条信息')
        return
      }
      this.value.push({
        num: '',
        packageName: '',
        unit: '',
        volume: '',
        weight: ''
      })
    },
    initPackageArr() {
      if (this.value.length === 0) {
        this.pushItem()
      }
    },
    isDisabled(key, index) {
      return !!dotData(this.original, `[${index}].${key}`)
    }
  }
}
</script>
